// components/progress-bar/progress-bar.js
// 获取全局背景音频管理器
const manager = wx.getBackgroundAudioManager();
const app = getApp();

// 歌曲总时长
let duration = 0; //默认0
// dom元素大小
let movableAreaWidth = 0
let movableViewWidth = 0
let currentSecond = 0
Component({
  /**
   * 组件的属性列表
   */

  properties: {

  },

  /**
   * 组件的初始数据
   */
  data: {
    showTime: {
      currentTime: '00:00',
      totalTime: '00:00',
    },
    movableX: 0,
    progress: 0,
  },
  lifetimes: {
    ready: function () {
      this._bindBGMEvent()
    },
    // attached: function () {
    //   // 在组件实例进入页面节点树时执行
    //   setTimeout(() => {
    //     this.setTime()
    //   }, 500);
    // },
  },
  /**
   * 组件的方法列表
   */

  methods: {
    _setTime() {
      duration = this.formatTime(manager.duration);
      console.log(duration);
      this.setData({
        ['showTime.totalTime']: duration
      })
    },
    // 拖动滑块时候触发
    onChange(event) {
      if (event.detail.source === 'touch') {
        this.data.movableX = event.datail.x;
        this.data.progress = (event.detail.x / (movableAreaWidth - movableViewWidth)) * 100;
      }
    },
    onTouChend() {
      const currentTime = duration * this.data.progress/100;
      manager.seek(currentTime)
      const currenFormat = this.formatTime(currentTime)
      this.setData({
        movableX:this.data.movableX,
        progress:this.data.progress,
        ['showTime.currentTime']:currenFormat
      })
    },

    // setTime() {
    //   // console.log(this.formatTime(Math.ceil(manager.duration)));
    //   app.setIsPlaying(true);
    //   console.log(manager.duration);
    //   console.log(manager.currentTime);
    //   console.log(app.getIsPlaying());
    //   if (app.getIsPlaying()) {
    //     const that = this
    //     setTimeout(function () {
    //       if (app.getIsPlaying()) {
    //         // let totalTime = that.formatTime(Math.ceil(manager.duration)); //总共时间
    //         // let currentTime = that.formatTime(Math.ceil(manager.currentTime)); //当前播放时间
    //         that.setData({
    //           progress: Math.ceil(manager.currentTime),
    //           currentTime: that.formatTime(Math.ceil(manager.currentTime)),
    //           duration: Math.ceil(manager.duration),
    //           totalTime: that.formatTime(Math.ceil(manager.duration))
    //         })
    //         that.setTime();
    //       }
    //     }, 1000)
    //   }
    // },
    //格式化时长



    // 绑定背景音频管理

    // 
    _bindBGMEvent() {
      // 背景播放事件
      // 播放
      manager.onPlay(() => {
        console.log('onPlay');
      })
      // 暂停
      manager.onPause(() => {
        console.log('onPause');
      })
      // 停止
      manager.stop(() => {
        console.log('stop');
      })
      // 自然播放结束
      manager.onEnded(() => {
        console.log('onEnded');
      })
      // 加载
      manager.onWaiting(() => {
        console.log('onWaiting');
      })
      // 背景音乐进入可播放状态
      manager.onCanplay(() => {
        console.log('onCanplay');

        let duration = manager.duration;

        if (duration === undefined) {
          setTimeout(() => {
            this._setTime()
          }, 1000);
        } else {
          this._setTime()
        }
      })
      // 播放时间
      manager.onTimeUpdate(() => {
        // console.log('onTimeUpdate');
        // 获取播放秒数,只获取整数
        let currentTime = manager.currentTime;
        let second = Math.floor(currentTime)
        // 在同一秒内 只会执行一次：1.1111-1.9999
        if (second != currentSecond) {
          let duration = manager.duration;
          const x = (currentTime / duration) * (movableAreaWidth - movableViewWidth);
          const progress = (currentTime / duration) * 100
          this.setData({
            movableX: x,
            progress: progress,
            ['showTime.currentTime']: this.formatTime(currentTime)
          })
          currentSecond = second
        }

      })
      // 监听播放失败
      manager.onError(() => {
        console.log('onError');
      })
    },
    // 获取movable大小
    _getMovableSize() {
      const query = this.createSelectorQuery();
      console.log(query.select("movable-area"));
      console.log(query.select("movable-view"));
      query.select(".movable-area").boundingClientRect();
      query.select(".movable-view").boundingClientRect();
      query.exec(rect => {
        movableAreaWidth = rect[0].width
        movableViewWidth = rect[1].width
      })
    },
    formatTime(s) {
      let t = '';
      s = Math.floor(s);
      if (s > -1) {
        let min = Math.floor(s / 60) % 60;
        let sec = s % 60;
        if (min < 10) {
          t += "0";
        }
        t += min + ":";
        if (sec < 10) {
          t += "0";
        }
        t += sec;
      }
      return t;
    },
  }
})